<template>
  <div>
    <el-dialog title="设置" :visible.sync="dialogVisible">
      <el-form
        ref="form"
        :model="websiteinfo"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item prop="siteLogo" label="Logo：">
          <uploadImg
            @image-uploaded="handleImageUploadedLogo"
            :sitePic="websiteinfo.siteLogo"
            :disabled="false"
          />
        </el-form-item>
        <el-form-item prop="siteName" label="子页面名：">
          <el-input v-model.trim="websiteinfo.siteName" style="width: 80%" />
        </el-form-item>
        <el-form-item prop="sitePic" label="子页面图片：">
          <uploadImg
            @image-uploaded="handleImageUploadedPic"
            :sitePic="websiteinfo.sitePic"
            :disabled="false"
          />
        </el-form-item>
        <el-form-item prop="siteUrl" label="子页面路径：">
          <el-input
            v-model.trim="websiteinfo.siteUrl"
            style="width: 80%"
            :disabled="isSiteUrlDisabled"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取消</el-button>
        <el-button type="primary" @click="submitDialog">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addSubpage, editSubpage } from "@/api/api.js";
import uploadImg from "./uploadImg.vue";

export default {
  data() {
    return {
      dialogVisible: this.dialogFormVisible, // 本地变量来管理弹窗的可见性
      websiteinfo: this.websiteInfo,
      rules: {
        siteLogo: [
          { required: true, message: "Logo不能为空", trigger: "blur" },
        ],
        siteName: [
          { required: true, message: "网站名不能为空", trigger: "blur" },
        ],
        sitePic: [
          { required: true, message: "网站图片不能为空", trigger: "blur" },
        ],
        siteUrl: [
          { required: true, message: "网站链接不能为空", trigger: "blur" },
        ],
      },
      isSiteUrlDisabled: false,
    };
  },

  props: {
    dialogFormVisible: Boolean,
    websiteInfo: Object,
    mainPageId: String,
    getSubpageInfo: Function,
  },

  watch: {
    dialogFormVisible(newValue) {
      this.dialogVisible = newValue;
    },
    dialogVisible(newValue) {
      this.$emit("update:dialogFormVisible", newValue);
    },
    websiteInfo: {
      handler(newValue) {
        this.websiteinfo = newValue;
      },
      deep: true,
      immediate: true,
    },
  },

  methods: {
    async submitDialog() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.websiteinfo.id && this.websiteinfo.id !== "") {
            try {
              const res = await editSubpage(this.websiteinfo);
              this.$emit("refresh");
              this.$message({
                message: res.data.message,
                type: res.data.code === 200 ? "success" : "error",
              });
            } catch (error) {
              console.error(error);
            } finally {
              this.dialogVisible = false;
            }
          } else {
            try {
              this.websiteinfo.siteId = this.mainPageId;
              const res = await addSubpage(this.websiteinfo);
              this.$emit("refresh");
              this.$message({
                message: res.data.message,
                type: res.data.code === 200 ? "success" : "error",
              });
              // 清空表单
              this.websiteinfo = {
                siteLogo: "",
                siteName: "",
                sitePic: "",
                siteUrl: "",
              };
            } catch (error) {
              console.error(error);
            } finally {
              this.dialogVisible = false;
            }
          }
        } else {
          this.$message({ message: "请填写完整", type: "error" });
        }
      });
    },
    cancelDialog() {
      this.dialogVisible = false;
    },
    handleImageUploadedLogo(url) {
      this.websiteinfo.siteLogo = url;
    },
    handleImageUploadedPic(url) {
      this.websiteinfo.sitePic = url;
    },
  },
  components: {
    uploadImg,
  },
};
</script>
